<template>
  <div class="product-detail">
    <h2>产品详情</h2>
    <p>产品 ID: {{ $route.query.id }}</p>
    <!-- 产品详细信息将在这里展示 -->
    <div v-if="productData">
      <el-descriptions title="产品信息" :column="2" border>
        <el-descriptions-item label="产品名称">{{ productData.name }}</el-descriptions-item>
        <el-descriptions-item label="产品类别">{{ productData.category }}</el-descriptions-item>
        <el-descriptions-item label="供应商">{{ productData.supplier_name }}</el-descriptions-item>
        <el-descriptions-item label="净重">{{ productData.net_weight }}克</el-descriptions-item>
        <el-descriptions-item label="保质期">{{ productData.shelf_life }}天</el-descriptions-item>
        <el-descriptions-item label="存储条件">{{ productData.storage_conditions }}</el-descriptions-item>
        <el-descriptions-item label="状态">{{ productData.status === 'active' ? '活跃' : '不活跃' }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="营养成分" :column="1" border style="margin-top: 20px;">
        <el-descriptions-item label="营养信息">
          <pre>{{ productData.nutrition_info_text }}</pre>
        </el-descriptions-item>
      </el-descriptions>
       <el-descriptions title="其他信息" :column="1" border style="margin-top: 20px;">
         <el-descriptions-item label="产品描述">
           <p>{{ productData.description }}</p>
         </el-descriptions-item>
         <el-descriptions-item label="产品图片">
            <img v-if="productData.image_url" :src="productData.image_url" alt="产品图片" style="max-width: 200px; max-height: 200px;">
            <span v-else>暂无图片</span>
         </el-descriptions-item>
      </el-descriptions>
    </div>
    <div v-else>
      <p>正在加载产品数据...</p>
    </div>
    <el-button @click="goBack" style="margin-top: 20px;">返回</el-button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'ProductDetail',
  data() {
    return {
      productData: null
    };
  },
  created() {
    const productId = this.$route.query.id;
    if (productId) {
      this.loadProductData(productId);
    }
  },
  methods: {
    loadProductData(id) {
      console.log(`加载 ID 为 ${id} 的产品数据...`);
      // TODO: 替换为实际的后端 API 地址
      axios.get(`/api/products/${id}`)
        .then(response => {
          this.productData = response.data;
           // 将可能的 JSON 字符串格式化
          if (typeof this.productData.nutrition_info === 'string') {
            try {
              this.productData.nutrition_info = JSON.parse(this.productData.nutrition_info);
              this.productData.nutrition_info_text = JSON.stringify(this.productData.nutrition_info, null, 2);
            } catch (e) {
              console.error('解析营养信息失败:', e);
              this.productData.nutrition_info_text = this.productData.nutrition_info; // fallback to original string
            }
          } else {
             this.productData.nutrition_info_text = JSON.stringify(this.productData.nutrition_info, null, 2);
          }
        })
        .catch(error => {
          console.error('加载产品数据失败:', error);
          this.$message.error('加载产品数据失败');
        });
    },
    goBack() {
      this.$router.go(-1); // 返回上一页
    }
  }
};
</script>

<style scoped>
.product-detail {
  padding: 20px;
  background-color: #fff;
}
h2 {
  margin-bottom: 20px;
}
pre {
  white-space: pre-wrap; /* css-3 */
  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: -o-pre-wrap; /* Opera 7 */
  word-wrap: break-word; /* Internet Explorer 5.5+ */
  background-color: #f5f5f5;
  padding: 10px;
  border-radius: 4px;
}
</style>